<template>
    <HeadImage :background="backPath" style="height: 25vh">
        <p slot="two" class="head">{{disposition[0]}}</p>
    </HeadImage>
       <div class="box"
            :style="{
           'background':$store.state.nowTime==='moon' ?
           '#333131':'linear-gradient(to right, rgba(245, 241, 243) 0%, rgba(255, 252, 220, 0.68) 100%)' }">
           <div v-html="content"></div>
           <input placeholder="文章标题" class="essay_title" v-model="essay.title" maxlength="50"
                  :style="{'color':$store.state.nowTime==='moon' ?'#f6f5f5':'#595757'}">

           <ArticleEditingType @handleTypeAdd="handleTypeAdd"></ArticleEditingType>

           <input type="text" v-model="essay.password" placeholder="文章加密密码,无密码则不加密"
                  :style="{'color':$store.state.nowTime==='moon' ?'#f6f5f5':'#595757'}"
                  class="password">

           <div contenteditable="true" class="essay_body"
                @input="contentBody"
                ref="edit"
                :style="{'color':$store.state.nowTime==='moon' ?'#f6f5f5':'#595757',
                'background':$store.state.nowTime==='moon' ? '#8f8d8d':'#c0c7c1'}">  </div>
          <form  method="post" enctype="multipart/form-data"  action="">
              <a class="file "   @change="getFileAll()" >选择图片
                   <input type="file" name="file" id="myFile"   ref="img"  multiple >
              </a>
              <div class="essay_img"
                   :style="{'color':$store.state.nowTime==='moon' ?'#f6f5f5':'#595757',
                  'background':$store.state.nowTime==='moon' ? '#8f8d8d':'#f8e5e5'}">
                   <ul >
                      <li   v-for="(item,index) in fileImg">
                          <p @click="delImg(item,index)">x</p>
                          <img :src="item" alt="">
                      </li>
                   </ul>
              </div>
             <div class="choose">
                 <span @click="save">保存</span>  <div class="submit" @click="submit">提交</div>
             </div>
              <div style="font-size: 13px;color: #8f8c8c">温馨提示：暂时无法保存编辑图片</div>
          </form>
       </div>
 </template>

<script>

import api from "@/api";
import HeadImage from "@/components/PublicComponents/HeadImage.vue";
import store from "@/store";
import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import ArticleEditingType from "@/components/articleEditing/ArticleEditingType.vue";

export default {
    name: "ArticleEditing",
    components: {ArticleEditingType, SiteInformation, HeadImage},
    data(){
        return{
            backPath:"",
            content:"",
            essay:{
              title:"",
              img:"",
              body:"",
              encrypt:0,
              password:"",
              type:"",
            },
            files:[],
            fileImg:[],//原图片回显的数组
            disposition:"",
            article_type:'',//图片分类
        }
    },
    watch:{
    },
    methods:{
        handleTypeAdd(type){
            this.article_type = type;
        },
        //上传文章
        submit(){
            if(this.article_type.toString() === ""){
                alert("分类不为空")
                return
            }
            if(this.essay.title === "" || this.essay.title === " "){
                alert("标题不为空")
                return
            }
            this.essay.type =  this.article_type.toString()
            this.essay.encrypt = this.essay.password !== "" ? 1 : 0;
            store.commit('LoadTheAnimation');
            // 添加需要上传的文件
            const form = new FormData();
            if(this.files.length>0) {
                for (let i = 0; i < this.files.length; i++) {
                    form.append('files', this.files[i]);
                }
            }
            this.essay.img ="";
            form.append('writing', JSON.stringify(this.essay));
                api.writingsNew(form).then((res)=>{
                    if(res.data.code===200){
                        window.localStorage.removeItem("Article_editing") //删除保存文章标题，内容等信息
                        window.localStorage.removeItem("fileImg")  //删除保存文章图片数据
                        console.log("发表成功");
                        store.commit('LoadTheAnimation');
                        this.$router.replace({path:'/home'});
                    }else {
                        console.log("发表失败");
                        store.commit('LoadTheAnimation');
                    }
                })
        },

        delImg(item,index){
            this.fileImg.splice(index,1)
            this.files.splice(index,1)
            },

        //保存文章信息按钮
        save(){
            this.essay.body = this.$refs.edit.innerHTML
            this.essay.img = JSON.stringify(this.fileImg)
            //保存文章标题，内容等信息
             window.localStorage.setItem("Article_editing",JSON.stringify(this.essay))
            alert("保存成功");
            this.$router.replace({path:'/home'});
        },
        contentBody(ever){
            this.essay.body = this.$refs.edit.innerHTML
        },
        //選擇图片
        getFileAll() {
            let myFile = document.getElementById('myFile').files
            if (myFile.length > 3) {
                alert("一次最大可选3张图片")
                return
            }
            for(let i=0; i<myFile.length;i++) {
                if (myFile[i].size > 1024 * 1024*4) {
                    alert('单张图片大小不能超过 4MB!');
                    this.files = [];
                    return "";
                }
                this.files.push(myFile[i])
            }
            this.each(this.files)
        },
        each(file){
            this.fileImg = [];
            let url = window.URL || window.webkitURL
            for(let i =0;i<file.length;i++){
                this.fileImg.push(url.createObjectURL(file[i]))
            }
        },
    },

    mounted() {
        setTimeout(()=>{
            let writing = JSON.parse(window.localStorage.getItem("DataContent"));
            if(writing){
                this.disposition = writing[13].content.split("|||||");
                this.backPath = writing[12].content;
            }
        },100)
            let Article_editing = JSON.parse(window.localStorage.getItem("Article_editing"));
             if(Article_editing!=null){
               this.essay = Article_editing;
               this.fileImg = JSON.parse(this.essay.img) === "" ? [] : JSON.parse(this.essay.img);
               this.$refs.edit.innerHTML = this.essay.body
            }
    },



}
</script>

<style scoped>
.box_bottom{
    background: transparent;
    height: 80px;
}
input,.essay_body{
    outline: none;
    border: 0;
    margin-bottom: 1vh;
    background: transparent;
}
.box{
    width: 52vw;
    min-width: 386px;
    min-height:40vh;
    padding: 10px;
    background: #fbfbfd;
    border-radius: 5px;
    margin: auto;
    animation: lis .5s ease-in-out 0s 1 forwards;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@keyframes lis {
    0%{
        transform: scale(0);
    }100%{
         transform: scale(1);
     }
}
.essay_title{
    display: block;
    outline: 0 none;
    resize:none;
    padding: 5px;
    width: 100%;
    font-size: 25px;
    font-weight: bolder;
    color: #4f4c4c;
    overflow:hidden;
    word-break:break-all;
    border-bottom:1px solid #8f8c8c ;
}
.essay_type{
    padding: 5px;
    width: 20vw;
    min-width: 320px;
    height: 35px;
    font-size: 13px;
    border-bottom:1px solid #8f8c8c ;
}
.essay_body{
    padding: 20px;
    min-height: 50vh;
    height: 100%;
}
.essay_img{
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}
.essay_img ul{
    width: 100%;
    height: 100%;
    min-height: 90px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.essay_img ul li{
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    animation: imgBox .5s ease-in-out 0s 1 forwards;
}
.essay_img ul li img{
height: 100px;

}
input[type="file"]{
    opacity: 0;
}
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #f1f3f5;
    text-decoration: none;
    cursor: pointer;
}

.submit, span {
    width: 100px;
    height: 40px;
    border: 0;
    color: white;
    font-size: 15px;
    background: #8acef5;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
}

.choose span {
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background: #e5a31b;
    margin-right: 30px;
}
.submit:hover,span:hover{
    opacity: .8;
    cursor: pointer;
}
.choose{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.password{
    width: 100%;
    max-width: 200px;
    padding: 5px;

    border-bottom: 1px solid  #8f8c8c;
    color: #8f8c8c;
    height: 35px;


}
.essay_img ul li p{
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    z-index: 99;
    text-align: center;
    color: #f0f1f5;
    background: #c0bbbb;

}
@keyframes imgBox {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
.essay_img ul li p:hover{
    cursor:pointer;
    opacity: .9;
}


</style>